<!doctype html>
<html>
  <head>
    <title>angular-react table with ng-repeat</title>

    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    <style>
    [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
      display: none !important;
    }
    .content {
      margin: 0 auto;
      padding: 0 2em;
      max-width: 800px;
      margin-bottom: 50px;
      line-height: 1.6em;
    }
    .header {
      max-width: 768px;
      margin: 0 auto;
      padding: 1em;
      text-align: center;
      border-bottom: 1px solid #eee;
      background: #fff;
    }
    .header h1 {
      font-size: 300%;
      font-weight: 100;
      margin: 0;
    }
    .content .pure-menu {
      margin-top: 2em;
    }
    .content .pure-table {
      margin-top: 2em;
    }
    </style>
  </head>
  <body ng-app="app" ng-controller="mainCtrl" >
    <div class="content">
      <div class="header">
        <h1>Table with ng-repeat</h1>
      </div>

      <div class="pure-menu pure-menu-open pure-menu-horizontal">
        <ul>
          <li><a href="#" ng-click="regenerate()">Refesh Modified Date</a></li>
        </ul>
      </div>

      <table ng-cloak class="pure-table">
        <thead>
          <tr>
            <th ng-repeat="col in table.cols">
              {{col}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="row in table.rows">
            <td ng-repeat="cell in row">{{cell}}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script src="../../bower_components/angular/angular.js"></script>
    <script src="../../bower_components/react/react.js"></script>
    <script src="../../bower_components/react/react-dom.js"></script>

    <script src="../../ngReact.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>
